<script setup>
import { useRequest } from '@/hooks/requestHooks';
import { getEntSubList, getWorkorderList, getWorkorderNumStat } from '@/api/index.js';
import { TableList } from '@/components/MainComponents.js';
import QueryForm from '@/components/QueryForm.vue';

const appContainer = ref(null);
const contBoxHeight = ref(null);
const queryParams = ref({
  institutionCode: '',
  minStartTime: '',
  maxStartTime: '',
  pageSize: 10,
  pageNum: 1,
});
const list = ref([
  { name: '待处理工单：', flag: '待处理' },
  { name: '处理中工单：', flag: '处理中' },
  { name: '已处理工单：', flag: '已处理' },
]);
const searchData = ref({
  institutionCode: '',
  dateRange: [],
});
const searchList = ref([
  {
    type: 'select',
    label: '机构名称',
    prop: 'institutionCode',
    placeholder: '请选择机构',
    filterable: true,
    statusOptions: [],
    selectProps: {
      value: 'buildingCode',
      label: 'buildingName',
    },
  },
  {
    type: 'daterange',
    label: '工单提报时间',
    prop: 'dateRange',
  },
]);
const columObj = ref({
  index: true,
  columnData: [
    {
      text: true,
      prop: 'startTime',
      label: '工单提报时间',
    },
    {
      text: true,
      prop: 'workOrderCode',
      label: '工单编号',
    },
    {
      text: true,
      prop: 'equCode',
      label: '报修设备编号',
    },
    {
      text: true,
      prop: 'equName',
      label: '报修设备名称',
    },
    {
      text: true,
      prop: 'reason',
      label: '故障原因',
    },
    {
      text: true,
      prop: 'workOrderStatus',
      label: '工单状态',
    },
    {
      text: true,
      prop: 'handlePeople',
      label: '处理人',
    },
    {
      text: true,
      prop: 'handleResult',
      label: '处理结果',
    },
    {
      text: true,
      prop: 'handleTime',
      label: '处理时间',
    },
    {
      text: true,
      prop: 'institutionCode',
      label: '机构编号',
    },
    {
      text: true,
      prop: 'buildingName',
      label: '机构名称',
    },
  ],
});
const [, , entRun] = useRequest(getEntSubList, {
  defaultParams: [{}],
  onSuccess: res => {
    searchList.value[0].statusOptions = res.data;
    queryParams.value.institutionCode = res.data[0].buildingCode;
    searchData.value.institutionCode = res.data[0].buildingCode;
    handleQuery();
  },
});
const [res, loading, run] = useRequest(getWorkorderList, {
  defaultParams: [queryParams.value],
  manual: true,
});
const [res2, , run2] = useRequest(getWorkorderNumStat, {
  defaultParams: [queryParams.value],
  manual: true,
});
const handleQuery = () => {
  queryParams.value.institutionCode = searchData.value.institutionCode;
  queryParams.value.minStartTime = searchData.value.dateRange ? searchData.value.dateRange[0] : '';
  queryParams.value.maxStartTime = searchData.value.dateRange ? searchData.value.dateRange[1] : '';
  run(queryParams.value);
  run2(queryParams.value);
};
const resetQuery = () => {
  searchData.value.dateRange = [];
  entRun();
};
const getList = e => {
  queryParams.value.pageNum = e.page;
  queryParams.value.pageSize = e.limit;
  handleQuery();
};
onMounted(() => {
  nextTick(() => {
    contBoxHeight.value = appContainer.value.clientHeight - 120 - 122;
  });
});
</script>
<template>
  <div ref="appContainer" class="app-container">
    <div class="u-base-fg u-mb20 u-pt20 u-pl20 u-pr20">
      <QueryForm
        :searchList="searchList"
        :searchData="searchData"
        @resetQuery="resetQuery"
        @handleQuery="handleQuery"
      />
    </div>
    <div class="contBox" :v-loading="loading">
      <div class="u-df-spb u-mb20">
        <div>
          <span class="u-fs16 u-primary u-pr10" v-for="item in list" :key="item.name">
            <!-- {{ item.name + '--' }} -->
            {{ item.name + (res2?.[item.flag] ?? '--') }}
          </span>
        </div>
      </div>
      <TableList
        :tableData="res?.rows ?? []"
        :height="contBoxHeight"
        :columObj="columObj"
        :total="res?.total ?? 0"
        :pageObj="queryParams"
        @getList="getList"
      ></TableList>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.u-pt20 {
  padding-top: 20px;
}
.u-pl20 {
  padding-left: 20px;
}
</style>
